<template>
  <el-dialog
    :title="title"
    :visible.sync="uploadShow"
    width="70%"
    @close="$emit('close',false)"
  >
    <!-- 进度条 -->
    <el-steps
      :active="active"
      align-center
    >
      <el-step
        title="下载、导入"
        description="下载模板,导入文件"
      />
      <el-step
        title="预览、上传"
        description="本地预览数据、上传数据"
      />
    </el-steps>
    <!-- 内容区域 -->
    <div class="view-box">
      <!-- 步骤1 -->
      <div
        v-show="active==0"
        class="box"
      >
        <div class="step-box1">
          <div>
            <el-button
              type="success"
              size="small"
              @click="downloadTmpFile"
            >下载模板</el-button>
            <span>{{ fileInfo.name }}</span>
          </div>
          <div>
            <input
              ref="file"
              type="file"
              hidden
              @change="importExcelFile"
            >
            <el-button
              type="warning"
              size="small"
              @click="$refs.file.click()"
            >导入excel</el-button>
            <span>{{ fileName || '文件大小不要超过50kb' }} </span>
          </div>
        </div>
        <div class="tc">
          <el-button
            type="primary"
            size="small"
            @click="nextA"
          >下一步</el-button>
        </div>
      </div>
      <!-- 步骤2 -->
      <div v-show="active==1">
        <el-alert
          title="请核查数据是否有无，有可删除该条数据！"
          type="warning"
          center
          effect="light"
          show-icon
        />
        <br>
        <el-table
          :data="tableList"
          border
          max-height="450"
          stripe
        >
          <el-table-column
            v-for="(names,key) in keyName"
            :key="key"
            :fixed="key===0"
            :label="names"
            width="140px"
          >
            <template slot-scope="scope">
              {{ tableList[scope.$index][names] }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="small"
                @click="delRow(scope)"
              />
            </template>
          </el-table-column>
        </el-table>
        <br>
        <!-- 按钮区 -->
        <div class="tc">
          <el-button
            type="warning"
            size="small"
            @click="active--"
          >上一步</el-button>
          <el-button
            type="primary"
            size="small"
            @click="$emit('uploadData',tableList)"
          >上传数据</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
  model: {
    prop: 'uploadShow',
    event: 'close'
  },
  props: {
    // 模板信息
    fileInfo: {
      type: Object,
      require: true,
      default() {
        return { name: '', url: '' }
      }
    },
    // 批量导入标题
    title: {
      type: String,
      default: '批量导入学员'
    },
    // 是否打开
    uploadShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      active: 0,
      fileName: '',
      keyName: [], // 键名
      tableList: [] // 表格数据
    }
  },
  methods: {
    // 点击下载模板
    downloadTmpFile() {
      const elink = document.createElement('a')
      elink.download = this.fileInfo.name
      elink.style.display = 'none'
      elink.href = this.fileInfo.url
      document.body.appendChild(elink)
      elink.click()
      document.body.removeChild(elink)
    },
    // 导入excel文件
    importExcelFile() {
      console.log(this.$refs.file.files[0])
      const excelFileInfo = this.$refs.file.files[0]
      const type = [
        'application/vnd.ms-excel',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      ]
      if (!type.includes(excelFileInfo.type)) return this.$message.warning('格式不正确,仅支持xls和xlsx后缀')
      if ((excelFileInfo.size / 1024) > 50) return this.$message.warning('文件太大,文件大小不要超过50kb')
      this.fileName = excelFileInfo.name
      // 解析文件
      const fileReader = new FileReader()
      fileReader.onload = event => {
        try {
          const data = event.target.result
          const workbook = XLSX.read(data, { type: 'binary' }) //  以字符编码的方式解析
          const wsname = workbook.SheetNames[0] // 取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
          console.log(ws)
          // 赋值表头数据
          const obj = ws[0]// 读取第一个数据
          for (const key in obj) {
            this.keyName.push(key)// 把json键名加入表头数组
          }
          // 赋值表格数据
          this.tableList = ws
        } catch (e) {
          console.log(e)
          return this.$message.warning('解析文件出错')
        }
      }
      fileReader.readAsBinaryString(excelFileInfo)

      // 释放内容
      this.$refs.file.value = ''
    },
    // 删除这一行数据
    delRow(scope) {
      this.tableList.splice(scope.$index, 1)
    },
    // 下一步A
    nextA() {
      if (!this.fileName) return this.$message.warning('请导入文件')
      this.active++
    }

  }
}
</script>
<style lang="scss">
.view-box{
  margin:20px;
  // border:1px solid #eee;
  // box-shadow: 0 0 3px 0 rgba(0,0,0,.1);
}
.tc{
  text-align: center;
}
.step-box1{
  align-items: center;
  display: flex;
  justify-content: space-around;
   margin:20px;
  padding: 20px;
}
.step-box1 span{
  margin-left: 10px;
}
</style>
